<template>
  <view>
    <zh-sheet style="z-index: 2" :padding="[0, 0]" :margin="[0, 30]">
      <zh-input v-model="ruleForm.cellphone" :height="100" :transprent="false" prefix="tmicon-md-phone-portrait" placeholder="请输入手机号码"></zh-input>
    </zh-sheet>
    <zh-sheet v-if="loginType==='MOBILESMS'" style="z-index: 2" :padding="[0, 0]" :margin="[0, 30]">
      <zh-input v-model="ruleForm.userPassword" :height="100" :transprent="false" password prefix="tmicon-lock-fill" placeholder="请输入密码"></zh-input>
    </zh-sheet>
    <zh-sheet style="z-index: 2" :padding="[0, 0]" :margin="[0, 30]">
      <zh-input v-model="ruleForm.shortMsgCode" :inputPadding="[24, 0, 0, 0]" :height="100" :transprent="false" prefix="tmicon-supervise" placeholder="请输入短信验证码">
        <template v-slot:right>
          <zh-button :disabled="disableCodeBtn" @click="sendMessage" :label="(!msgForm.smsSendBtn && msgForm.smsText) || msgForm.time + ' s'"></zh-button>
        </template>
      </zh-input>
    </zh-sheet>
    <zh-sheet style="z-index: 2" v-if="showImgCode" :padding="[0, 0]" :margin="[0, 30]">
      <zh-input
        :inputPadding="[24, 0, 0, 0]"
        v-model="ruleForm.imgCode"
        :height="100"
        @input="imgChange"
        @clear="imgClear"
        :transprent="false"
        prefix="tmicon-safety-certificate"
        placeholder="请输入图片验证码"
      >
        <template v-slot:right>
          <img :src="imgSrc" @click="getCode" mode="" class="login-content-code" />
        </template>
      </zh-input>
    </zh-sheet>
    <zh-button style="z-index: 2" block label="登录" @click="signIn" :loading="loading.signIn" :disabled="loading.signIn"></zh-button>
    <zh-message ref="messageRef" :width="350" :height="350" :duration="2000"></zh-message>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import loginCellphone from '../../loginCellphone';
export default defineComponent({
  name: 'loginMobile',
  setup() {
    const { disableCodeBtn, msgForm, signIn, loading, ruleForm, sendMessage, getCode, imgSrc, imgChange, imgClear, showImgCode, messageRef,loginType } = loginCellphone();
    return {
      disableCodeBtn,
      msgForm,
      signIn,
      loading,
      ruleForm,
      sendMessage,
      getCode,
      imgSrc,
      imgClear,
      imgChange,
      showImgCode,
      messageRef,
      loginType
    };
  },
});
</script>

<style scoped lang="scss">
.login-content-form {
  margin-top: 20px;
  @for $i from 1 through 4 {
    .login-animation#{$i} {
      opacity: 0;
      animation-name: error-num;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      animation-delay: calc($i/10) + s;
    }
  }
  .login-img-code {
    display: block;
    width: 100%;
    height: 40px;
  }
  .login-content-code {
    width: 100%;
    padding: 0;
  }
  .login-content-submit {
    width: 100%;
    letter-spacing: 2px;
    font-weight: 300;
    margin-top: 15px;
  }
  .login-msg {
    color: var(--el-text-color-placeholder);
  }
}
</style>
